<template>
  <div
    class="diy-notice"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      class="diy-notice-1"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
    >
      <div class="diy-notice-icon">
        <img :src="diyItem.style.icon" />
      </div>
      <div class="diy-notice-split"></div>
      <div class="diy-notice-title" :style="{ color: diyItem.style.color }">
        {{
          diyItem.data.length > 0
            ? diyItem.data[0].title
            : "开学啦丨喝牛奶，要新鲜，你选对牛奶了吗？"
        }}
      </div>
    </div>
  </div>
</template>


<script lang="ts">
export default {
  name: "storeDiyPreviewNotice",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyNoticeDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyNoticeDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        params: {
          source: "auto",
        },
        style: {
          icon: "",
          color: "#000000",
          bg_status: 1,
          bg: "",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
        default_data: {
          title: "",
          link: {},
        },
      };
    },
    index: 0,
  }
);
</script>

<style scoped>
/*****************广告*******************/
.diy-notice .diy-notice-1 {
  display: flex;
  align-items: center;
  padding: 10px;
}
.diy-notice .diy-notice-1 .diy-notice-icon {
  flex-shrink: 0;
  height: 14px;
  text-align: center;
  line-height: 18px;
}
.diy-notice .diy-notice-1 .diy-notice-icon img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.diy-notice .diy-notice-1 .diy-notice-split {
  width: 1px;
  height: 14px;
  background-color: #e4e4e4;
  margin: 0 11px;
}
.diy-notice .diy-notice-1 .diy-notice-title {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>